<template>
  <div class="container w" id="services">
    <Title :data="titleData" />
    <div class="content wow animate__fadeInUp" data-wow-duration="2s">
      <ul>
        <li @mouseenter="isShow(index)" @mouseleave="()=>i=-1" v-for="(item,index) in list" :key="index">
          <transition enter-active-class="animate__animated  animate__fadeInUp animate__faster"
            leave-active-class="animate__animated animate__faster animate__fadeOutDown"
          >
            <div class="bgcolor" v-if="index=== i"></div>
          </transition>
          <a href="#">
            <span class="iconfont " :class="item.icon"></span>
            <h5>{{item.title}}</h5>
            <p>
              {{item.text}}
            </p>
          </a>
        </li>
        
      </ul>
    </div>
   
  </div>
</template>

<script>
import Title from "../Title";
export default {
  components: { Title },
  data() {
    return {
      titleData: {
        title: "Services",
        text: "Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.",
      },
      i:-1,
      list:[
        {icon:'icon-lanqiu',title:'Lorem Ipsum',text:'Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi'},
        {icon:'icon-24gf-fileText',title:'Sed ut perspiciatis',text:'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore'},
        {icon:'icon-zhinanzhen',title:'Magni Dolores',text:'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia'},
        {icon:'icon-diqiu',title:'Nemo Enim',text:'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis'},
      ]
    };
  },
  methods:{
    isShow(index){
      this.show=true
      this.i = index
    }
  },
  mounted(){
    //入场动画
    this.$nextTick(()=>{
      this.$wow.init()
    })
  }
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  margin-bottom: 60px;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    li {
      height: 250px;
      width: 25%;
      margin: 0 12px;
      background-color: #fff;
      box-shadow: 0 0px 29px rgba(68, 88, 144, 0.23);
      box-sizing: border-box;
      border-radius: 8px;
      position: relative;
      z-index: 10;
      overflow: hidden;
      a {
        background-color: transparent;
        width: 100%;
        height: 100%;
        display: inline-block;
        padding: 30px;
        box-sizing: border-box;
        span {
          font-size: 48px;
          color: #67b0d1;
          display: block;
          margin-bottom: 15px;
        }
        h5 {
          color: #111;
          font-size: 18px;
          margin-bottom: 15px;
        }
        p {
          color: #444;
          font-size: 15px;
          line-height: 28px;
        }
        &:hover span,
        &:hover p,
        &:hover h5 {
          color: #fff;
        }
      }

      .bgcolor {
        background-color: #67b0d1;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
      }
    }
  }
}

</style>